import React, {Component} from 'react';
import {
  Appearance,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
} from 'react-native';
import {connect} from 'react-redux';
import {pxToDp} from '../../utils/stylesKits';
import {dark, light, baseURL} from '../../config';
import PropTypes from 'prop-types';

/**
 * APP UserHeader 页面
 * @colorScheme 用户手机主题模式 是否开启了黑夜模式
 * */

const colorScheme = Appearance.getColorScheme() === 'dark' ? dark : light;

class UserHeader extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'UserHeader',
    };
  }

  componentDidMount() {}

  componentDidUpdate(prevProps, prevState) {}

  componentWillUnmount() {}

  render() {
    const {user} = this.props;
    return (
      <View style={styles.container}>
        <Image
          style={styles.avatar}
          source={{
            uri: `${baseURL}${user.avatar}`,
          }}
        />
        <View style={styles.userContent}>
          <View style={styles.nickname}>
            <Text style={styles.nickname}>{user.nickname}</Text>
            <Text style={styles.grade}>Lv16</Text>
          </View>
          <Text style={styles.userJob}>@陶粪</Text>
        </View>
        <TouchableOpacity>
          <Text style={styles.gollowBtn}> ➕ 关注</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const mapStateToProps = state => ({});
const mapDispatchToProps = {};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    width: '100%',
    marginTop: pxToDp(10),
    marginBottom: pxToDp(15),
  },
  avatar: {
    width: pxToDp(36),
    height: pxToDp(36),
    borderRadius: pxToDp(18),
    marginRight: pxToDp(9),
  },
  userContent: {
    flex: 1,
    justifyContent: 'space-around',
  },
  nickname: {
    flexDirection: 'row',
    alignItems: 'center',
    color: colorScheme.color,
    fontSize: pxToDp(13),
  },
  userJob: {
    paddingLeft: pxToDp(8),
    color: colorScheme.color,
    fontSize: pxToDp(12),
    opacity: 0.7,
  },
  grade: {
    marginLeft: pxToDp(5),
    height: pxToDp(10),
    lineHeight: pxToDp(10),
    padding: pxToDp(1),
    borderRadius: pxToDp(2),
    color: '#ffffff',
    fontSize: pxToDp(9),
    fontWeight: '800',
    backgroundColor: '#38badc',
  },
  gollowBtn: {
    padding: pxToDp(5),
    color: '#38badc',
    borderWidth: pxToDp(1),
    borderColor: '#38badc',
    borderRadius: pxToDp(5),
  },
});
UserHeader.propTypes = {
  user: PropTypes.object.isRequired,
};
export default connect(mapStateToProps, mapDispatchToProps)(UserHeader);
